<template>
    <div class="permission">
        <AddAndDel></AddAndDel>
        <el-card>
            <el-table ref="multipleTable" class="custom-table" height="500px"
                :default-sort="{ prop: 'date', order: 'descending' }"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" :data="tableData" tooltip-effect="dark"
                style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="序号" width="100" sortable>
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称">
                </el-table-column>
                <el-table-column prop="roleCode" label="角色编码">
                </el-table-column>
                <el-table-column prop="remark" label="角色描述" width="300" show-overflow-tooltip>
                </el-table-column>

                <el-table-column label="操作" align="center" width="230">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handlePermission(scope.row)">分配权限</el-button>
                        <el-button type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" style="color:red;" type="text"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <Pagination :paginationData="paginationData" @getPaginationData="getRoleData"></Pagination> -->
        </el-card>
        <PermissionDialog></PermissionDialog>
        <AddDialog @addRole="addRole" @editRole="editRole"></AddDialog>
    </div>
</template>
<script>
import Search from '../../components/search/index.vue'
import AddAndDel from '../../components/add_and_del/index.vue'
import Pagination from '../../components/pagination/index.vue'
import PermissionDialog from './dialog/index.vue'
import AddDialog from './add_dialog/index.vue'
export default {
    name: 'Permission',
    components: {
        Search,
        AddAndDel,
        Pagination,
        PermissionDialog,
        AddDialog
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            placeholder: '请输入角色名称',
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.getRoleData()
    },
    methods: {
        // 获取角色列表信息
        getRoleData() {
            this.request.get('/role/getRoleList').then(res => {
                if (res.code == 20000) {
                    this.tableData = res.data
                }
            })
        },
        // 权限分配
        handlePermission(row) {
            this.$bus.$emit('permissionDialog', true)
            // 获取角色默认的权限页面
            this.$bus.$emit('getRoleMenu', row.id)
            this.$bus.$emit('getForm', row)
        },
        // 新增 角色
        addRole(obj) {
            this.request.post('/role/roleAdd', obj).then(res => {
                if (res.code == 20000) {
                    // 重新获取管理员信息列表
                    this.getRoleData()

                }
            })
        },
        // 修改角色信息
        editRole(obj) {
            this.request.post('/role/roleEdit', obj).then(res => {
                if (res.code == 20000) {
                    // 重新获取角色信息列表
                    this.getRoleData()

                }
            })
        },
        // 编辑角色信息
        handleEdit(row) {
            this.$bus.$emit('add', true)
            this.$bus.$emit('getForm', row)
        },
        // 删除角色信息
        handleDelete(row) {
            this.$confirm('是否确认删除该角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.request.delete(`/role/roleDel?roleId=` + row.id).then(res => {
                    if (res.code == 20000) {
                        this.getRoleData()
                        this.$message({
                            type: 'success',
                            message: '删除成功~'
                        })

                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }
    }
};
</script>
<style lang='less' scoped>
.permission {
    .el-table {
        font-size: 12px;
    }

    .img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #11A983 !important;
        color: #FFF;
    }

}
</style>